<template>
	<div class="teacher-train">
		<div class="title-name title-border clear">
			<div class="title-name-l fl">
				<router-link to="/train/manage/index">我发起的</router-link>
				<router-link to="/train/manage/partake">我参与的</router-link>
			</div>
			<div class="title-name-r fr">
				<router-link to="/train/teacher-add">新建培训</router-link>
			</div>
		</div>
		<!--  -->
		<div class="teacher-train" v-loading="loading">
			<ul>
				<li class="teacher-train-list clear" v-for="item of launch_list" :key="item.trainid">
					<div  class="train-list-cover fl"  v-if="item.date_type === '未开始' " @click="remind()">
						<img :src="BASE_URL+item.picture" :onerror="errorImg">
					</div>
					<router-link v-else
					:to="{path: '/train/teacher-detail', query: {trainid: item.trainid}}" class="train-list-cover fl">
						<img :src="BASE_URL+item.picture" :onerror="errorImg">
					</router-link>
					<div class="train-list-content">
						
						<div class="train-list-title clear">
							<p v-if="item.date_type === '未开始' " @click="remind()">{{item.name}}</p>
							<router-link v-else
							:to="{path: '/train/teacher-detail', query: {trainid: item.trainid}}" >{{item.name}}</router-link>

							<div class="train-list-operation fr">
								<el-popover
								  placement="bottom"
								  width="160"
								  popper-class="ioperation_hover"
								  trigger="hover">
								 	<ul class="r_ioperation">
										<li>
											<router-link v-if="item.date_type !== '培训中'"
											:to="{path: '/train/teacher-edit', query: {trainid: item.trainid, name: item.name}}">编辑</router-link>
										</li>
										<li  >
											<router-link :to="{path: '/train/statistics',query: {trainid: item.trainid, name: item.name}}">统计</router-link>
										</li>
										<li @click="removeList(item.trainid)">删除</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>

						<div class="train-list-label">
							<span>{{item.studyname}}</span>
							<span>{{item.subjectname}}</span>
						</div>

						<div class="train-list-info">
							<span>开始：<i>{{item.start_time.substring(0,16)}}</i></span>
							<span>结束: <i>{{item.end_time.substring(0,16)}}</i></span>
						</div>

						<div class="train-list-status">
							<el-tag  v-if="item.date_type === '培训中'">培训中</el-tag>
							<el-tag  v-if="item.date_type === '已结束'" type="info">已结束</el-tag>
							<el-tag  v-if="item.date_type === '未开始'" type="warning">未开始</el-tag>
							<el-tag  v-if="item.date_type === '已过期'" type="danger">已过期</el-tag> 
						</div>
					</div>
				</li>
			</ul>
			<el-pagination
			 	 background
			 	 v-if="total_number > page_size"
			 	 class="pageing"
			     @size-change="sizeChange"
			     @current-change="currentChange"
			     :current-page="page_index"
			     :page-size="page_size"
			     layout="total, prev, pager, next, jumper"
			     :total="total_number">
			</el-pagination>

		</div>

		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>

	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				page_index: 1,
				page_size: this.$g.page_size,
				total_number: 0,
				placeholder: false,
				launch_list: [],
				loading: true,
				errorImg: 'this.src="' + require('../../../../public/images/image_loding.png') + '"'
			}
		},
		created(){
			this.get_launchList()
		},
		methods: {
			remind(){
				this.$message({
					message: '培训时间还没开始，暂无法查看',
					type: 'warning'
				});
			},
			get_launchList(){
				let success = ( res =>{
					let data = res.data;
					this.launch_list = data.data;
					this.total_number = parseInt(data.data_sum);

					this.loading = false
					this.launch_list.length === 0
					? this.placeholder = true
					: this.placeholder = false
				});

				this.$ajax({
					url: 'api/Train/train_list',
					method: 'get',
					params: {
						create_id: this.$store.getters.userInfo.id,
						userid: this.$store.getters.userInfo.id,
						page_index: this.page_index,
						page_size: this.page_size,
						order_type: 'time'
					},
					func: {success: success}
				})
			},
			sizeChange(val) {
				this.page_size = val;
				this.get_launchList()
				// console.log(`每页 ${val} 条`);
			},
			//当前页
			currentChange(val) {
				this.page_index = val;
				this.get_launchList()
				// console.log(`当前页: ${val}`);
			},
			removeList(trainid){
				this.$confirm('确定删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them',
				}).then(() => {

					let trainidArr = [];
					let train = trainid
					trainidArr.push(train)

					let success = (res=>{
						this.$message.success(res.msg);
						this.get_launchList()

					})
		
					this.$ajax({
						url: 'api/Train/train',
						method: 'delete',
						params: {
							train_id: trainidArr,
							user_id: this.$g.user_id,
							type: 1
						},
						func: {
							success: success
						}
					})
				}).catch(() => {});
			},
		}
	}
</script>